<template>
  <div>
    <van-nav-bar left-text="发送评价" left-arrow @click-left="onClickLeft" />
    <div class="answerwraper">
      <img src="https://img01.yzcdn.cn/vant/ipad.jpeg" alt="商品图片">
      <div class="start">
        <h4>描述信息</h4>
        <van-rate v-model="startvalue" :size="25" color="#ffd21e" void-icon="star" void-color="#eee" />
        <p>{{startvalue}}分</p>
      </div>
    </div>
    <div class="sendmessage">
      <van-field v-model="message" rows="2" autosize type="textarea" maxlength="50" placeholder="分享你的购买心得给小姐妹们吧~">
        <template #button>
          <van-uploader v-model="fileList" multiple />
        </template>
      </van-field>
    </div>
    <div class="shopmessage">
      <van-cell-group>
        <van-cell title="店铺评分" />
        <van-cell title="物流服务">
          <template #right-icon>
           <van-rate v-model="movevalue" :size="25" color="#ffd21e" void-icon="star" void-color="#eee" />
             <p>{{movevalue}}分</p>

          </template>

        </van-cell>
        <van-cell title="服务态度">
          <template #right-icon>
             <van-rate v-model="attitudevalue" :size="25" color="#ffd21e" void-icon="star" void-color="#eee" />
             <p>{{attitudevalue}}分</p>
          </template>

        </van-cell>
        <van-button type="default" @click="Isoksendmessage()">发布</van-button>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { requestaddmesage } from '@/api/user.js'
export default {
  data() {
    return {
      message: '',
      startvalue: 0,
      movevalue:0,
      attitudevalue:0,
      fileList: []
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
     },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
    async Isoksendmessage() {
      let res = await requestaddmesage()
    },
  },
};
</script>

<style scoped>
.answerwraper {
  display: flex;
  height: 50px;
  width: 100px;
}

.start {
  display: flex;
}

.start h4 {
  width: 70px;
  text-align: center;
  color: grey;
  font-size: 14px;
}
.start .van-rate {
  width: 250px;
margin: 13px;

}

.sendmessage {
  margin: 10px;
  border: 1px solid rgb(189, 185, 185);
}

.van-field {
  height: 200px;
  position: relative;
}

.van-uploader {
  position: absolute;
  bottom: 0;
  left: 0;
}

.van-button {
  width: 100%;
  position: fixed;
  bottom: 0;
  color: red;
}
</style>